﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购买人次票</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet" />
    <style>
        .main {
            padding: 0.5% 3%;
            width: 96%;
            margin: 0 auto;
            margin-top: 3%;
        }

        body {
            background: #f6f6f6;
            font-size: inherit;
        }

        .buymain_d1 {
            padding: 0 4%;
            padding-top: 8%;
            padding-bottom: 4%;
            background: #fff;
        }

        .buy_main01 {
            text-align: left;
            width: 100%;
            margin-bottom: 5%;
        }

        .buymain_sp1 {
            font-size: 1.7rem;
            color: #909090;
        }

        .buymain_sp2 {
            font-size: 1.8rem;
        }

        .buymain_d2 {
            width: 100%;
            padding: 2% 4%;
            background: #fff;
            margin-top: -3%;
        }

        .buymain_d3 {
            width: 100%;
            padding: 2% 4%;
            background: #fff;
            margin-top: -3.3%;
        }

        .buymaind3_01 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 7%;
        }

        .buymaind3_02 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 30%;
        }

        .buymaind3_span1 {
            font-size: 1.6rem;
        }

        .buymaind3_02img {
            width: 10%;
            flex: 0.4;
        }

        .buymaind3_02span {
            background: #f5f5f5;
            color: #575c5f;
            flex: 0.4;
            font-size: 1.8rem;
            text-align: center;
            margin: 0 5%;
        }
    </style>
</head>
<body>
    <div class="page" id="Allbody" v-cloak>
        <header data-am-widget="header" class="am-header am-header-default" style="background-color: #FFFFFF; border-bottom: 1px solid rgb(211, 211, 211);">
            <div class="am-header-left am-header-nav" onclick="goBack()">
                <a href="javascript:" class="">
                    <img class="am-header-icon-custom" src="images/veas07.png" alt="" />
                </a>
            </div>
            <h4 class="am-header-title" style=" color: black;width: 100%;margin: 0 auto">{{Ticket.Name}}</h4>
            <div class="am-header-right am-header-nav"><a href="/Wap/Index.html" class="am-header-icon am-icon-home" style="color: #A9A9A9; "></a></div>
        </header>
        <div class="main">
            <div class="buymain_d1">
                <div class="buy_main01">
                    <span class="buymain_sp1">票次：</span>
                    <span class="buymain_sp2">{{Ticket.Name}}</span>
                </div>
                <div class="buy_main01">
                    <span class="buymain_sp1">项目：</span>
                    <span class="buymain_sp2">{{Sport.Name}}</span>
                </div>
                <!--<div class="buy_main01">
                    <span class="buymain_sp1">开始：</span>
                    <span class="buymain_sp2" style="color: #ffa44f;">3月30日（周五）  09:00</span>
                </div>
                <div class="buy_main01" style="margin-bottom: 0">
                    <span class="buymain_sp1">结束：</span>
                    <span class="buymain_sp2">4月08日（周日）  21:00</span>
                </div>-->

            </div>
            <img src="images/venuebuy01.png" alt="" style="width: 100%;    margin-top: -4%;">
            <img src="images/venuebuy02.png" alt="" style="width: 100%;margin-top: -5.5%;">
            <div class="buymain_d2">
                <span style="color: #ffa44f;font-size: 1.6rem;display: block;width: 100%">{{Ticket.Info}}</span>
            </div>
            <img src="images/venuebuy01.png" alt="" style="width: 100%;    margin-top: -4%;">
            <img src="images/venuebuy02.png" alt="" style="width: 100%;margin-top: -5.5%;">
            <div class="buymain_d3">
                <div class="buymaind3_01">
                    <span class="buymaind3_span1">数量</span>
                    <div id="buymaind3_02" class="buymaind3_02">
                        <img src="images/venuebuy03.png" alt="" class="buymaind3_02img buymainadd">
                        <span id="buymaind3_02span" class="buymaind3_02span">{{number}}</span>
                        <img src="images/venuebuy04.png" alt="" class="buymaind3_02img buymainreduce">
                    </div>
                </div>
                <span style="display: block;width: 100%;color: #ff7573;text-align: center;font-size: 1.7rem">总价：{{money}}元</span>
            </div>
            <button class="am-btn am-round" style="color: #fff;font-size: 1.6rem;background: #6fddb1;display: block;width: 100%;margin-top: 6%" v-on:click="buy">购买</button>
        </div>
    </div>
</body>
<script src="https://use.fontawesome.com/ca6b609d64.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script src="js/common.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
<script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.js"></script>

<script>
    var Allbody = new Vue({
        el: '#Allbody',
        data: {
            TicketgId: "",//人次票gid
            number: 1,//购买张数
            Ticket: [],//当前人次票信息
            Sport: [],//人次票体育种类
            money: 0,
            //model:''
        },
        methods: {
            getInfo: function () {
                var that = this;
                $.ajax({
                    type: 'POST',
                    url: window.apiUrl + '/Api/Field/TicketInfo',
                    data: { "TicketgId": that.TicketgId },
                    success: function (data) {
                        console.log(data);

                        if (data.errcode == 0) {
                            that.Ticket = data.data.TicketInfo.o;
                            that.Sport = data.data.TicketInfo.Sport;
                            that.money = that.Ticket.Pirce;
                        } else {
                            alert(data.errmsg);
                        }
                    },
                    //error: function () {
                    //    alert("服务器加载异常");
                    //}
                })
            },
            makecount: function () {
                var that = this;
                $('.buymainadd').click(function () {
                    that.number = that.number - 1;
                    if (that.number <= 0) {
                        alert("至少购买一张!");
                        that.number = 1;
                    }
                    that.money = that.number * that.Ticket.Pirce;
                });
                $('.buymainreduce').click(function () {
                    that.number = that.number + 1;
                    that.money = that.number * that.Ticket.Pirce;
                });
            },
            changeinput: function () {
                var that = this;
                that.money = that.number * that.Ticket.Pirce;
            },
            buy: function () {
                var that = this;
                //console.log(that.number +","+ that.TicketgId)
                //return false;
                $.ajax({
                    type: 'POST',
                    url: apiUrl + '/Api/Field/createTicket',
                    data: { "TicketgId": that.TicketgId, "number": that.number },
                    success: function (data) {
                        if (data.errcode == 0) {
                            //console.log(data.data.Id);
                            location.replace("TicketOrderInfo.html?TicketgId=" + data.data.TicketgId);
                        }
                        else {
                            alert(data.errmsg);
                        }
                    },
                    //error: function () {
                    //    alert("服务器加载异常");
                    //}
                })

            }
        },
    });

    $(function () {
        var TicketgId = $.getParam("TicketgId");
        Allbody.TicketgId = TicketgId;
        Allbody.getInfo();
        Allbody.makecount();
    })
</script>

</html>
